<template>
  <div id="app">
    <!-- 店铺信息 -->
    <sell-header
      class="sell-header"
      @show="OpenShopInfo"
      :info="shop"
    ></sell-header>
    <!-- 导航 -->
    <sell-nav class="sell-nav"> </sell-nav>
    <!-- 主体内容区域 -->
    <div class="sell-main">
      <keep-alive exclude="ratings">
        <router-view :goods="goods"></router-view>
      </keep-alive>
    </div>
    <!-- 购物车 -->
    <sell-cart class="sell-cart"></sell-cart>
    <!-- 商铺详情 -->
    <transition name="fade">
      <shop-info
        @close="CloseShopInfo"
        v-show="ShowShopInfo"
        :shop="shop"
      ></shop-info>
    </transition>
  </div>
</template>
<script>
import SellCart from '@/views/layout/SellCart.vue'
import SellHeader from '@/views/layout/SellHeader.vue'
import SellNav from '@/views/layout/SellNav.vue'
import ShopInfo from '@/views/shop/ShopInfo.vue'
import { getShop, getGoodsList } from '@/api/api.js'
import { mapState } from 'vuex'
export default {
  components: {
    SellCart,
    SellHeader,
    SellNav,
    ShopInfo
  },
  data() {
    return {
      shop: {},
      // goods: [],
      ShowShopInfo: false
    }
  },
  methods: {
    // 显示店铺详情
    OpenShopInfo() {
      this.ShowShopInfo = true
    }, // 显示店铺详情
    CloseShopInfo() {
      this.ShowShopInfo = false
    },
    async getShopList() {
      const { data } = await getShop()
      this.shop = data
      console.log('shop', data)
    },
    // async getRatingsList() {
    //   const { data } = await getRatings()
    //   this.goods = data
    //   console.log('goods', data)
    // },
    async getGoodsList() {
      const { goodsList } = await getGoodsList()
      const arr = goodsList
      arr.forEach(item => {
        item.foods.forEach(element => {
          element.count = 0
        })
      })
      // this.goods = arr
      this.$store.commit('SET_GOODS', arr)
    }
  },
  computed: {
    ...mapState(['goods'])
  },
  created() {
    this.getShopList()
    this.getGoodsList()
  }
}
</script>
<style lang="less">
#app {
  display: flex;
  flex-direction: column;
  .sell-header {
    width: 100%;
    flex: 0 0 120px;
    background-color: aquamarine;
    z-index: 1;
  }
  .sell-nav {
    width: 100%;
    flex: 0 0 40px;
    line-height: 40px;
  }
  .sell-main {
    flex: 1;
    overflow-y: hidden;
  }
  .sell-cart {
    flex: 0 0 50px;
    background-color: yellowgreen;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
}
</style>
